<template>
    <div class="catalogTree">
        <el-input
          class="catalogTreeFilter"
          placeholder="输入关键字进行过滤"
          v-model="filterText">
        </el-input>
        <slot name="searchBottom"></slot>
        <el-tree
            :data="data"
            node-key="id"
            default-expand-all
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            ref="tree">
            </el-tree>

    </div>
</template>


<script>
import {getAction, putAction, postAction, deleteAction} from '@/api/manage'
  export default {
    data() {
      return {
        data: [],
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    created(){
        this.initTreeData()
        
    },
    methods: {
      initTreeData(){
          getAction('/api/sdt-flow/flowable/category/tree?parentId=0').then(res => {
                this.data = res.data.data
          })
      },
     
      handleNodeClick(data) {
        
          this.curNode = data.id
          this.$emit('nodeClick',data)
      },
      filterNode(value, data) {
        if (!value) return true;
        debugger
        return data.label.indexOf(value) !== -1;
      }
      
    },
    watch: {
        filterText(val) {
          this.$refs.tree.filter(val);
        }
    },
  };
</script>

<style scoped>
.catalogTree{
    background:#FFFFFF;
    margin: 0 10px;
    padding:12px;
}
.catalogTreeFilter{
   margin-bottom:12px;
}
</style>